<template>
  <!-- 优势 -->
  <div class="container">
    <el-container>
      <el-header>
        <div class="wrapper">
          <h2 class="color-yellow">OUR ADVANTAGE</h2>
          <hr class="line" />
          <div class="intro">Lorem ipsum dolor sit amet</div>
        </div>
      </el-header>
      <el-main>
        <el-row :gutter="20">
          <el-col :span="8">
            <div class="grid-content bg-purple item">
              <div class="imgbox">
                <img src="../../../assets/imgs/p1.jpg" alt />
              </div>
              <div class="info">
                <span>LOREM IPSUM DOLOR SIT AMET,CONSEC TEETUER ADIPECPP IT.</span>
                <p>
                  His primis omittam intellegat cu, voluptua appetere mea ad, eu harum oporteat vix.
                  Et vel quod legimus, graeci electram ocurreret at his. Vix at tation facete impetus omnesque ius harum antiopam.
                </p>
              </div>
            </div>
          </el-col>
          <el-col :span="8">
            <div class="grid-content bg-purple item">
              <div class="imgbox">
                <img src="../../../assets/imgs/p2.jpg" alt />
              </div>
              <div class="info">
                <span>LOREM IPSUM DOLOR SIT AMET,CONSEC TEETUER ADIPECPP IT.</span>
                <p>
                  His primis omittam intellegat cu, voluptua appetere mea ad, eu harum oporteat vix.
                  Et vel quod legimus, graeci electram ocurreret at his. Vix at tation facete impetus omnesque ius harum antiopam.
                </p>
              </div>
            </div>
          </el-col>
          <el-col :span="8">
            <div class="grid-content bg-purple item">
              <div class="imgbox">
                <img src="../../../assets/imgs/p4.jpg" alt />
              </div>
              <div class="info">
                <span>LOREM IPSUM DOLOR SIT AMET,CONSEC TEETUER ADIPECPP IT.</span>
                <p>
                  His primis omittam intellegat cu, voluptua appetere mea ad, eu harum oporteat vix.
                  Et vel quod legimus, graeci electram ocurreret at his. Vix at tation facete impetus omnesque ius harum antiopam.
                </p>
              </div>
            </div>
          </el-col>
        </el-row>
      </el-main>
    </el-container>
  </div>
</template>

<script>
export default {};
</script>

<style scoped>
/* 优势 */
.container{
  width: 1200px;
  margin: 0 auto;
  position: relative;
}
.el-container{
  padding: 60px 10px 80px;
  position: relative;
}
.el-container::before,.el-container::after{
  content: '\0020';
  display: block;
  overflow: hidden;
  visibility: hidden;
  width: 0;
  height: 0;
}
.el-container::after{
  clear: both;
}
.el-container .el-header{
  text-align: center;
  margin: 60px 0 70px;
  padding: 0;
  height: 140px;
}
.wrapper {
    padding: 5px;
    display: inline-block;
}
.wrapper h2 {
    font-size: 60px;
    line-height: 1.2;
    font-weight: 500;
}
hr.line {
    margin: 15px auto;
    padding: 0;
    max-width: 90px;
    border: 0;
    border-top: solid 5px #c1c1c1;
    text-align: center;
}
.wrapper .intro {
    color: #FF69B4;
    font-size: 18px;
    height: 25px;
}
.item{
  border: 1px solid #ccc;
  padding: 10px;
  background-color: #fff;
  margin: 10px;
}
.item:hover{
  border: 1px solid #FF69B4;
}
.imgbox{
  position: relative;
  overflow: hidden;
  display: inline-block;
  width: 100% !important;
}
.imgbox img{
  display: block;
  width: 100% !important;
  height: auto;
  transition: all .5s ease;
}
.item:hover .imgbox img{
  transform: scale(1.25);
}
.info{
  background-color: #fff;
  padding: 20px;
}
.info span{
  font-size: 15px;
  font-weight: bold;
  color: #000;
}
.info p{
  margin: 10px 0;
  color: #777;
}
</style>